<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="${ctx}/css/form.css">
    <#include "/pubHeadStyle.html">
</head>
<body>
<form class="layui-form" lay-filter="formData" id="formData" style="background: #fff; height: 467px;overflow-y: auto;">
    <div class="layui-btn-container" style="position: absolute;bottom: 0;left:45%">
        <a class="layui-btn" lay-submit lay-filter="defForm">下一步</a>
    </div>
    <div class="formDefSearch">
        <div class="layui-form-item" style="padding-top:14px;">
            <div class="layui-inline">
                <label class="layui-form-label">表单标题: <span style="color:red;">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" name="subject" id="subject" style="width:200px" class="layui-input"
                           lay-verify="required" autocomplete="off" maxlength="32"/>
                </div>
                <div style="float: left;margin-left: 58px;">
                    <label class="layui-form-label">表单别名:<span style="color:red;">*</span> </label>
                    <div class="layui-input-inline">
                        <input type="text" name="formKey" style="width: 200px" id="formKey" class="layui-input"
                               lay-verify="required" maxlength="32"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="position: relative;">
            <label class="layui-form-label">表单类型: </label>
            <div class="layui-unselect layui-form-select downPanel"
                 style=" position: absolute;top:5%;left:111px;width: 200px;" name="selectInit" lay-filter="selectInit">
                <div class="layui-select-title" name="selectInit" lay-filter="selectInit">
                    <span class="layui-input layui-unselect" id="treeclass"
                          style="color:#000;line-height: 36px;"></span>
                    <input type="hidden" name="categoryId" id="categoryId" value="0">
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit" style="width: 200px;max-height: 140px">
                    <dd>
                        <ul id="classtree"></ul>
                    </dd>
                </dl>
            </div>
            <label class="layui-form-label" style="margin-left:34%">是否公开: </label>
            <div class="layui-input-inline">
                <input type="radio" name="isPublic" value="0" title="不公开" checked>
                <input type="radio" name="isPublic" value="1" title="公开">
            </div>
        </div>
        <div class="dataDic">
            <div class="layui-form-item">
                <label class="layui-form-label">设计类型: </label>
                <div class="layui-input-inline" style="width:33%">
                    <input type="radio" name="designType" lay-filter="designType" value="0" title="通过表生成" checked>
                </div>
                <div class="layui-inline isTable">
                    <label class="layui-form-label">表:<span style="color:red;">*</span></label>
                    <div class="layui-input-block">
                        <input type="hidden" value="" name="tableId" id="mainTableId">
                        <input type="hidden" value="" name="subStr" id="subStr">
                        <input type="text" name="tableName" id="mainTableName" class="layui-input" readonly
                               style="width:200px;float: left;" lay-verify="required"/>
                        <div class="election">
                            <button type="button" class="layui-btn layui-btn-sm choice">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="height: 84px;line-height: 84px;">表单描述: </label>
                <div class="layui-input-block" style="margin-left:113px">
                    <textarea style="margin-left:-1px;resize:none;height:154px" class="layui-textarea" name="formDesc" id="formDesc"
                              cols="76"  maxlength="256"></textarea>
                </div>
            </div>
        </div>
        <div style="display: none">
            <select name="selectInit" lay-filter="selectInit">
                <option>请选择</option>
            </select>
        </div>
    </div>
    <input type="hidden" id="parentIndex"/>
</form>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'form', 'layedit', 'laydate', 'jquery', 'table', 'layer', 'tree'], function () {
        var form = layui.form
            , layer = layui.layer
            , tree = layui.tree
        var setter = layui.setter;
        var $ = layui.$;
        form.render();
        $(document).on('mouseenter', '.layui-tree li a cite', function () {
            $(".layui-tree li a cite").each(function (i) {
                $(this).removeClass("colorSwitch fontColor");
            });
            $(this).addClass("colorSwitch fontColor");
        }).mouseout(function () {
            $(this).removeClass("colorSwitch fontColor");
        });

        var parentIndex = parent.layer.getFrameIndex(window.name);
        $("#parentIndex").val(parentIndex);
        var categoryId = '${categoryId}';
        var categoryName = '${categoryName}';
        $.ajax({
            type: 'post',
            url: serverPath.formPath + setter.sysLinkPath + "globalType/list",
            dataType: 'json',
            data: {"catKey": "FORM_TYPE", "hasRoot": "-1", "treeType": "1"},
            success: function (result) {
                tree.render({
                    elem: "#classtree",
                    data: result.data,
                    click: function (node) {
                        var $select = $($(this)[0].elem).parents(".layui-form-select");
                        $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.data.title).end().find("input:hidden[name='categoryId']").val(node.data.categoryId);
                        dictType = node.data.id;
                    }
                });
            }
        });
        $(".downPanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downPanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });
        $('#treeclass').text(categoryName);
        $("#categoryId").val(categoryId);
        form.on('select(initTable)', function (data) {
            $('#mainTableId').val(data.value);
            return false;
        });

        $('.choice').on('click', function () {
            parent.layer.open({
                type: 2,
                title: "选择表",
                shade: 0.3,
                area: ['800px', '500px'],
                content: serverPath.formPath + setter.formLinkPath + 'table/view/generTable?parentName=' + window.name
            })
        });
        form.on('submit(defForm)', function (data) {
            var selCategoryId = $("#categoryId").val();
            /*if (categoryId) { //这时是点的左侧分类树的分类
                selCategoryId = categoryId;
            }*/
            if ($('#subject').val !== "" && $("#formKey").val !== "") {
                var mainTableId = $('#mainTableId').val();
                var subStr = $('#subStr').val();
                var selUrl = serverPath.formPath + setter.formLinkPath + 'formDef/view/selectTemplate?mainTableId=' + mainTableId + "&parentName=" + window.name + "&categoryId=" + selCategoryId;
                if (subStr) { //带子表选择模板的
                     parent.layer.open({
                        type: 2,
                        title: "选择表单模板",
                        shade: 0.3,
                        area: ['800px', '550px'],
                        content: selUrl
                    })
                }else{
                    parent.layer.open({
                        type: 2,
                        title: "选择表单模板",
                        shade: 0.3,
                        area: ['500px', '230px'],
                        content:selUrl
                    })
                }
            }
        });

        //获取表单别名
        $("#subject").on('blur', function () {
            var fieldDesc = $(this).val();
            if ($.trim(fieldDesc).length < 1) return;
            var formKey = component.chineseToPinyinAlias(fieldDesc);
            $("#formKey").val(formKey[0]);
        })
    })
</script>
<style>
    body {
        background: #fff;
    }

    .layui-tree li {
        width: 180px;
        overflow: visible;
    }

    .layui-tree li a {
        display: inline-block;
        width: 180px;
    }

    .layui-tree li a cite {
        display: inline-block;
        width: 139px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .saveForm .layui-form-selected dl {
        max-height: 170px;
    }

    .fontColor {
        color: #fff !important;
    }

    .saveForm .layui-form-select .layui-input {
        width: 100%;
    }
</style>
</body>
</html>
